<!DOCTYPE html>
<html>
	<head>
		<title>优惠券列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- 参数栏 -->
				<div class="c-title">优惠券列表</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">优惠券名称：</label>
						<el-input size="mini" v-model="p.name" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">优惠券编号：</label>
						<el-input size="mini" v-model="p.coupon_bn" clearable></el-input>
					</div>
					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
						<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					</div>
				</el-form>
				<!-- 数据列表 -->
				<el-table class="data-table" ref="data-table" :data="dataList" size="small">
					<el-table-column label="ID" prop="coupon_id" width="50px"></el-table-column>
					<el-table-column label="优惠券名称" prop="name" width="200px"></el-table-column>
					<el-table-column label="优惠券编号" prop="coupon_bn"></el-table-column>
					<el-table-column label="活动状态" prop="status_name"></el-table-column>
					<el-table-column label="制券数量" prop="total_num"></el-table-column>
					<el-table-column label="消费金额" prop="amount"></el-table-column>
					<el-table-column label="折扣金额" prop="discount"></el-table-column>
					<el-table-column label="用户端" prop="platform"></el-table-column>
					<el-table-column label="状态">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_active" active-color="#67C23A" :active-value="1" :inactive-value="0" inactive-color="#F56C6C" @change="change(s.row)"></el-switch>
							<b style="color: green;" v-if="s.row.is_active == 1">正常</b>
							<b style="color: red;" v-if="s.row.is_active == 0">禁用</b>
						</template>
					</el-table-column>
					<el-table-column label="创建日期">
						<template slot-scope="s">
							{{sa.forDate(s.row.created_at, 2)}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="220px">
						<template slot-scope="s">
							<el-button type="text" size="mini" @click="update(s.row)">修改</el-button>
							<el-button type="text" size="mini" @click="del(s.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--  分页  -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.page" 
						:page-size.sync="p.page_size" 
						:total="total" 
						:page-sizes="[20]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, // 超级对象
					p: {// 查询参数 
						name: '',
						coupon_bn: '',
						page: 1,
						page_size: 20,
						status: 0,
					},
					dataList: [], // 数据集合
					total: 0,
				},
				methods: {
					// 刷新
					f5: function(){
						sa.ajax(router.getCouponList, this.p, function(res){
							this.dataList = res.list;	// 数据
							this.total = res.total;
							sa.f5TableHeight();		// 刷新表格高度 
						}.bind(this), {type:'get'});
					},
					// 修改
					update: function (data) {
						sa_admin.showTab({id:90007, name: "编辑优惠券", url: "view/marketing/coupon-edit.html?id="  + data.coupon_id});
					},
					// 删除
					del: function (data) {
						sa.confirm('是否删除，此操作不可撤销', function(){
							sa.ajax(router.deleteCoupon,{coupon_id: data.coupon_id},function(res){
								sa.arrayDelete(app.dataList, data);
								sa.ok('删除成功');
								sa.f5TableHeight();		// 刷新表格高度 
							});
						});
					},
					// 添加
					add: function () {
						sa_admin.showTab({id:90007, name: "编辑优惠券", url: "view/marketing/coupon-edit.html?id=-1"});
					},
					// 启用禁用
					change: function (data) {
						sa.ajax(router.enableCoupon,{coupon_id: data.coupon_id},function(res){
							sa.ok('操作成功');
						});
					}
				},
				created: function(){
					this.f5();
					sa.onInputEnter();		// 监听输入框的回车事件，执行查询  
				}
			});
		</script>
	</body>
</html>